<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>鼠标沪指</title>
</head>
<body>
<canvas id="canvas" style="background: #bbbbbb"></canvas>
<script>
    var canvasHelper = {
        x: 0,
        y: 0,
        open: false,
        draw: function (ctx, x, y) {
            if (!this.open) return;
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(x, y);
            ctx.stroke();

            this.x = x;
            this.y = y;
        }
    }

    var ctx = canvas.getContext("2d");

    canvas.addEventListener("mousemove", function (e) {
        canvasHelper.draw(ctx, e.x - canvas.offsetLeft, e.y - canvas.offsetTop);
        console.log(canvasHelper.x, canvasHelper.y);
    });
    canvas.addEventListener("mouseup", function (e) {
        canvasHelper.open = false;
    });
    canvas.addEventListener("mousedown", function (e) {
        canvasHelper.x = e.x - canvas.offsetLeft;
        canvasHelper.y = e.y - canvas.offsetTop;
        console.log(canvasHelper.x, canvasHelper.y);
        canvasHelper.open = true;
    });

</script>
</body>
</html>